<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				图标说明文档
			</div>
			<div class="sub-title quote">
				目前提供了{{icons.length}}个图标，点击对应图标可直接复制名称
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode1 }}</template>
			</code-view>
			
			<div class="example-title">自定义Icon</div>
			<code-view> 
				<template slot="code-html">{{ htmlCode2 }}</template>
			</code-view>
			
			<p></p>
			<div class="alert">
				<p class="alert">注意事项</p>
				<p>当使用<span class="success">prefix</span>属性指定前缀时,例如:</p>
				<code-view>
					<template slot="code-html">{{ htmlCode3 }}</template>
				</code-view>
				<p>Gabriel-UI会生成如下代码：</p>
				<code-view>
					<template slot="code-html">{{ htmlCode4 }}</template>
				</code-view>
				<p>此时，你需要确保的是<span class="danger">my-icon</span>所对应的字体文件已被加载</p>
			</div>	
			
			<div class="example-title">&lt;gr-icon&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="60">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="120">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="100">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="100">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="icon-list">
				<div class="icon-view" v-for="(item,index) in icons" :key="index" @click="copy(item)">
					<gr-button flat :border="false">
						<grIcon :name="item" size="30px" color="#666"></grIcon>
						<div>
							<span>{{item}}</span>
						</div>
					</gr-button>
				</div>
			</div>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/icondemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
				icons: [
					'arrow-up-circle', 'direction-down-circle',
					'arrow-left-circle', 'arrow-right-circle', 'arrow-down', 'arrow-right',
					'direction-down', 'direction-right', 'direction-up', 'direction-left',
					'bottom', 'top', 'arrow-left-bold', 'arrow-up-bold', 'arrow-down-bold', 'arrow-right-bold',
					'add', 'add-circle', 'edit', 'file-delete', 'file-add', 'delete', 'ashbin', 'adjust', 
					'browse', 'camera', 'chart-pie', 'chart-bar', 'attachment', 'code', 'close',
					'check-item', 'calendar', 'comment', 'complete', 'cry',
					'customer-service', 'copy', 'cut', 'data-view', 'discount', 'download',
					'electronics', 'drag', 'elipsis', 'export', 'explain', 'eye-close', 'email',
					'error', 'favorite', 'fabulous', 'file-common', 'film', 'file', 'folder-close', 'filter',
					'good', 'home', 'history', 'file-open', 'import', 'image-text', 
					'link', 'layout', 'fullscreen-expand', 'fullscreen-shrink', 
					'lock', 'map', 'meh', 'menu', 'loading', 'help', 'minus-circle', 'modular', 'notification',
					'mic', 'more', 'pad', 'play', 'print', 'mobile-phone', 'minus', 'navigation',
					'pdf', 'prompt', 'refresh', 'picture', 'pin', 'save', 'search',
					'share', 'scanning', 'security', 'sign-out', 'select', 'stop', 'success', 'smile', 'switch',
					'setting', 'survey', 'task', 'skip', "text", "time", "toggle-left", "toggle-right",
					'telephone', 'unlock', 'user', 'upload', 'work', 'training', 'warning', 'zoom-in', 'zoom-out',
					'add-bold', 'close-bold', 'minus-bold', 'select-bold', 'arrow-up-filling', 'arrow-down-filling',
					'arrow-left-filling', 'arrow-right-filling', 'caps-unlock-filling', 'comment-filling',
					'good-fill','check-item-filling', 'clock-filling', 'delete-filling', 'decline-filling', 'dynamic-filling',
					'intermediate-filling', 'favorite-filling', 'fabulous-fill', 'layout-filling', 'help-filling', 'history-filling',
					'filter-filling', 'file-common-filling', 'news-filling', 'edit-filling', 'fullscreen-expand-filling',
					'smile-filling', 'rise-filling', 'picture-filling', 'notification-filling', 'user-filling',
					'setting-filling', 'switch-filling', 'work-filling', 'task-filling', 'success-filling',
					'warning-filling', 'folder-filling', 'map-filling', 'prompt-filling', 'meh-filling',
					'cry-filling', 'top-filling', 'home-filling', 'camera-fill','sorting'
				],
				htmlCode1: `<gr-icon name="check-item-filling" color="green" size="34px"/>
<gr-icon name="user-filling" color="orange" size="3rem"/>`,
				jsCode1: `import {Icon} from 'gabriel-ui'
Vue.use(Icon)`,
				htmlCode2: `<gr-icon prefix="my-icon" name="boss"/>`,
				htmlCode3: `<gr-icon name="boss" prefix="my-icon"/>`,
				htmlCode4: `<span class="my-icon my-icon-boss"><span>`,
				propertiesExplain: [
					{
						attrName: 'name',
						introduce: `图标的名称`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'size',
						introduce: `图标尺寸, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '20px'
					},
					{
						attrName: 'color',
						introduce: `图标颜色`,
						type: 'String',
						optionValues: '----',
						defaultValue: '#000'
					},
					{
						attrName: 'prefix',
						introduce: `图标类名的前缀，用于添加自定义图标`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			copy(value) {
				this.$util.copy(value)
				this.$toast.show('已复制')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doc-content {
		width: 1000px;
		.icon-list {
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.icon-view {
				width: 15%;
				padding: 2px;
				margin-top: 25px;
				-webkit-user-select: none;
				text-align: center;
				font-size: 14px;
				color: #666;
			}
		}
	}
</style>
